<template>
	<el-dialog
		title="更新目录"
		:model-value="dialogVisible"
		width="40%"
		:before-close="dialogBeforeClose"
		custom-class="my-dialog"
		@open="initFrom"
	>
		<el-form ref="form" :model="formData">
			<el-form-item label="目录名称" prop="name" :label-width="formLabelWidth">
				<el-input v-model="formData.name" size="small" autocomplete="off" />
			</el-form-item>
			<el-form-item label="目录图标" prop="iconSkin" :label-width="formLabelWidth">
				<el-input v-model="formData.iconSkin" size="small" autocomplete="off" />
			</el-form-item>
			<el-form-item label="是否节点" prop="isLeaf" :label-width="formLabelWidth">
				<el-select v-model="formData.isLeaf" size="small" placeholder="请选择是否目录" style="width: 100%">
					<el-option label="是" :value="1" />
					<el-option label="否" :value="0" />
				</el-select>
			</el-form-item>
			<el-form-item label="序号" prop="listId" :label-width="formLabelWidth">
				<el-input v-model="formData.listId" size="small" autocomplete="off" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancelForm">取 消</el-button>
				<el-button type="primary" @click="submitForm">更 新</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { EnumResult } from '@/assets/model/enums/EnumUtil';
import RequestUtil from '@/assets/model/common/RequestUtil';
import { system } from '@/api';

const Edit = defineComponent({
	mounted() {},
	props: {
		dialogVisible: Boolean,
		rowData: {} as any
	},
	data: function () {
		return {
			imgdir: new system.imgdir(),
			/**表单属性字段 */
			formData: {
				id: '',
				name: '',
				iconSkin: '',
				isLeaf: '',
				parentId: '',
				listId: ''
			},
			/**表单宽度 */
			formLabelWidth: '100px'
		};
	},
	emits: ['changeEdit'],
	methods: {
		initFrom() {
			this.formData.id = this.rowData.id;
			this.formData.name = this.rowData.name;
			this.formData.iconSkin = this.rowData.iconSkin;
			this.formData.parentId = this.rowData.parentId;
			this.formData.listId = this.rowData.listId;
			this.formData.isLeaf = this.rowData.isLeaf;
		},
		/**dialog叉号点击方法,关闭之前拦截执行 */
		dialogBeforeClose(done: any) {
			this.cancelForm();
		},
		/**重置表单 */
		clearForm() {
			let methes: any = this.$refs['form'];
			methes.resetFields();
		},
		//取消操作
		cancelForm() {
			this.clearForm();
			this.$emit('changeEdit', false);
		},
		//提交目录信息
		submitForm() {
			let _this: any = this;
			let parent: any = _this.$parent;
			let data = this.formData;
			_this
				.$confirm('确定更新目录？', '更新提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
				.then(() => {
					RequestUtil.OperateData(this.imgdir.updateimagedir(data)).then(function (response: EnumResult) {
						if (response == EnumResult.success) {
							_this.cancelForm();
							parent.getCatalog();
							parent.refresh();
						}
					});
				})
				.catch(() => {
					_this.$message({
						type: 'info',
						message: '已取消更新'
					});
				});
		}
	}
});

export default Edit;
</script>

<style lang="scss"></style>
